import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Select, Input } from 'antd';
import React, { useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import styles from './style.less'
import { pkgTerminalDetail, queryCityInfo } from '../service'

const TerminalConfigAddOrEditForm = props => {
  const { terminalConfigAddOrEditFormVisible, modalTitle, configId, form, onCancel, onSubmit: handleTerminalConfig } = props;

  // 表单格式
  const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };

  // 到达航站，出发航站搜索数据
  const { data: selectData = [] } = useRequest(queryCityInfo);
  // 获取配置详情接口
  const { run: pkgTerminalDetailR } = useRequest((params) => pkgTerminalDetail(params), {
    manual: true,
    onSuccess: (data) => {
      form.setFieldsValue({
        airport3code: data.airport3code,
        airportType: data.airportType,
        airportName: data.airportName,
        tempCompensationAmount: data.tempCompensationAmount,
        closeCompensationAmount: data.closeCompensationAmount,
        phoneFirst: data.phoneFirst,
        phoneSecond: data.phoneSecond,
        phoneThird: data.phoneThird,
        emailAddress: data.emailAddress
      })
    }
  })



  // 确认
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleTerminalConfig(fieldsValue)
    });
  };

  useEffect(() => {
    if (configId !== '') {
      pkgTerminalDetailR({ ids: configId })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <>
      <Modal
        className={styles.terminalConfigAddOrEditForm}
        title={[
          <div key="title">{modalTitle}</div>
        ]}
        visible={terminalConfigAddOrEditFormVisible}
        onOk={okHandle}
        onCancel={() => onCancel()}
      >

        <Form.Item
          {...layout}
          label="航站三字码"
        >
          {form.getFieldDecorator('airport3code', {
            rules: [
              {
                required: true,
                message: '请选择航站三字码'
              }
            ]
          })(<Select
            allowClear={true}
            showSearch
            placeholder='请选择'
            filterOption={true}
            optionFilterProp="children">
            {
              selectData.map(item => (
                <Select.Option key={item.CITY3CODE}>{item.CITYNAME}-{item.CITY3CODE}</Select.Option>
              ))
            }
          </Select>)}
        </Form.Item>
        <Form.Item
          {...layout}
          label="航站类型"
        >
          {form.getFieldDecorator('airportType', {
            rules: [
              {
                required: true,
                message: '请选择航站类型'
              }
            ]
          })(<Select>
            <Select.Option key={1}>分公司</Select.Option>
            <Select.Option key={2}>本部</Select.Option>
            <Select.Option key={3}>运行基地</Select.Option>
            <Select.Option key={4}>有代表航站</Select.Option>
            <Select.Option key={5}>无代表航站</Select.Option>
          </Select>)}
        </Form.Item>
        <Form.Item
          {...layout}
          label="航站名称"
        >
          {form.getFieldDecorator('airportName', {
            rules: [
              {
                required: true,
                message: '请输入航站名称'
              }
            ]
          })(<Input placeholder='请输入' />)}
        </Form.Item>
        {/* <Form.Item
          {...layout}
          label="临补金额"
        >
          {form.getFieldDecorator('tempCompensationAmount', {
            rules: [
              {
                required: true,
                message: '请输入临补金额'
              }
            ]
          })(<Input placeholder='请输入' />)}
        </Form.Item>
        <Form.Item
          {...layout}
          label="结案金额"
        >
          {form.getFieldDecorator('closeCompensationAmount', {
            rules: [
              {
                required: true,
                message: '请输入结案金额'
              }
            ]
          })(<Input placeholder='请输入' />)}
        </Form.Item> */}
        <Form.Item
          {...layout}
          label="联系电话1"
        >
          {form.getFieldDecorator('phoneFirst', {
            rules: [
              {
                required: true,
                message: '请输入联系电话1'
              },
              {
                validator: async (rule, value, callback) => {
                  var reg1 = /^1\d{10}$/
                  var reg2 = /^0\d{2,3}-?\d{7,8}$/
                  if (value && (!reg1.test(value) && !reg2.test(value))) {
                    callback("请输入正确的联系电话")
                  }
                  callback();
                },
              }
            ]
          })(<Input placeholder='请输入' />)}
        </Form.Item>
        <Form.Item
          {...layout}
          label="联系电话2"
        >
          {form.getFieldDecorator('phoneSecond', {
            rules: [
              {
                validator: async (rule, value, callback) => {
                  var reg1 = /^1\d{10}$/
                  var reg2 = /^0\d{2,3}-?\d{7,8}$/
                  if (value && (!reg1.test(value) && !reg2.test(value))) {
                    callback("请输入正确的联系电话")
                  }
                  callback();
                },
              }
            ]
          })(<Input placeholder='请输入' />)}
        </Form.Item>
        <Form.Item
          {...layout}
          label="联系电话3"
        >
          {form.getFieldDecorator('phoneThird', {
            rules: [
              {
                validator: async (rule, value, callback) => {
                  var reg1 = /^1\d{10}$/
                  var reg2 = /^0\d{2,3}-?\d{7,8}$/
                  if (value && (!reg1.test(value) && !reg2.test(value))) {
                    callback("请输入正确的联系电话")
                  }
                  callback();
                },
              }
            ]
          })(<Input placeholder='请输入' />)}
        </Form.Item>
        <Form.Item
          {...layout}
          label="联系邮箱"
        >
          {form.getFieldDecorator('emailAddress', {
            rules: [
              {
                required: true,
                message: '请输入联系邮箱'
              },
              {
                validator: async (rule, value, callback) => {
                  var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/
                  if (value && !reg.test(value)) {
                    callback("请输入正确的邮箱")
                  }
                  callback();
                },
              }
            ]
          })(<Input placeholder='请输入' />)}
        </Form.Item>
      </Modal>
    </>
  );
};

export default Form.create()(TerminalConfigAddOrEditForm);
